<!-- 页面 -->
<template>
  <pc-nav></pc-nav>
<!--  <bread v-if="siteBar.type" :sitebar="siteBar.data"></bread> -->
  <div class="container-fluid" style="background:none; margin: 0 auto; padding: 0;margin-top:50px;">
		<s-layout navbar="normal" selffixed="true" boxbg="true">
			<div class="container">
				<view class="header-box">
					<view>
						<image style="width:250px;height:250px" :src="sheep.$url.cdn(state.goodsinfo.image)" mode="aspectFill"/>
					</view>
					<view class="header-right" v-if="state.goodsinfo.id">
						<view class="header-title">{{state.tiku_name}}</view>
						<view class="header-price">
							<text class="header-price-title">价格：</text>
							￥{{ state.goodsinfo.price[0] }}
						</view>
						<view class="header-info">
							<view>年份：{{ state.goodsinfo.year }}</view>
							<view>类型：{{ state.tikuinfo.tiku_type }}</view>
							<view>简介：{{ state.goodsinfo.subtitle }}</view>
						</view>
						<view style="height:20px"></view>
						<view class="buy-box ss-flex ss-col-center ss-p-r-20 ">
							<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
								<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
									>加入购物车</button
								>
								<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
								<view style="width:60px"></view>
								<view class="position-relative ss-flex cart" @click="sheep.$router.go('/pages/index/cart')">
									<image src="/static/cart.png" class="cart-icon"></image>
									<view class="position-absolute cart-num">{{ cartNum }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view style="height: 20px"></view>
				<view class="content-box-wrapper">
					<view class="ss-flex-1">
						<view class="vbar">题库列表</view>
						<s-tiku-chapters :id="state.id" :goods_id="state.goods_id" @update-detail="updateDetail" />
					</view>
					<s-goods-recommend />
				</view>
			</div>
			<div class="container-fluid">
			  <pc-footer></pc-footer>
			</div>
		</s-layout>
	</div>
	
</template>


<script setup>
  import pcNav from '@/sheep/components/pc-nav/pc-nav.vue';
  import Bread from '@/sheep/components/bread/bread.vue';
  import PcFooter from '@/sheep/components/pc-footer/pc-footer.vue';

	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';

  const cart = sheep.$store('cart');
  const siteBar=reactive({
    type:true,
    data:[
			{
				name:'首页',
				url:'/pages/index/index',
			},
			{
				name:'题库列表',
				url:'/pages/tiku/index',
			}
    ]
  });

	// 数据
	const state = reactive({
		id: '',
		goods_id: '',
		goodsinfo:{},
		tiku_name: '',
		tikuinfo:{},
	});

	onLoad(async (options) => {
		state.id = options.id;
		state.goods_id = options.goods_id;
	});

	const updateDetail = (data) => {
		state.goodsinfo = data.goodsinfo;
		state.tikuinfo=data.tikuinfo;
		state.tiku_name = data.tikuinfo.name;
	}

	const onAddCart = () => {
    if (state.goodsinfo.sku_prices.length === 0) {
      sheep.$helper.toast('请选择商品');
      return;
    }
      
		state.goodsinfo.sku_prices.forEach((item)=>{
			if (item.goods_id) {
				if (item.stock <= 0) {
					sheep.$helper.toast('库存不足');
				} else {
					sheep.$store('cart').add(item);
				}
			} else {
				sheep.$helper.toast('请选择规格');
			}
		});
	}

	const onBuy = () => {
		sheep.$api.goods.detail(state.goods_id).then((res) => {
			sheep.$router.go('/pages/order/confirm', {
				data: JSON.stringify({
					order_type: 'goods',
					goods_list: [{
						goods_id: state.goods_id,
						goods_num: 1,
						goods_sku_price_id: res.data.sku_prices[0].id
					}]
				})
			});
		});
	}

	const cartNum = computed(() => {
		return cart.list.reduce((total, item) => total + item.goods_num, 0);
	});
</script>

<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	:deep(.page-body) {
		position: relative;
		background:none !important;
	}

	.header-box {
		display: flex;
		gap: 20px;
		&::after {
			content: none;
		}

		.header-right {
			flex-grow: 1;
		}

		.header-title {
			font-size: 20px;
			font-weight: 500;
			overflow: hidden;
			position: relative;
		}

		.header-price {
			display: flex;
			width: 100%;
			height: 48px;
			margin: 10px 0 20px;
			padding-left: 10px;
			align-items: center;
			color: #f5464e !important;
			font-size: 24px;
			font-weight: 600;
			background: #f6f6f6;

			.header-price-title{
				font-size: 16px;
				color: #666;
				font-weight: 400;
			}
		}

		.header-info {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding-left: 5px;
		}
	}

	.uni-collapse {
		background: none;
	}

	.content-box-wrapper {
		display: flex;
		gap: 10px;
	}

	.content-box {
		flex-grow: 1;
		padding: 15px;
		border-radius: 10px;
		box-sizing: border-box;


		.skuname {
			font-size: 0.875rem;
			font-weight: bold;
			color: #000000;
			padding-left: 5px;
		}

		.skuItem {
			background-color: #FFFFFF;
			margin-top: 10px;
			border-radius: 8px;
			padding-left: 10px;
			padding-bottom: 20px
		}

		.content {
			width: 100%;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: flex-start;
			/* 确保线条和条目顶部对齐 */
			position: relative;

		}

		.course {
			padding: 10px 0;

			span {
				color: grey;
			}

			.item-dot {
				position: absolute;
				left: 6px;
				color: #f88a04;
				padding: 2px;
			}

			.item-title {
				font-size: 24rpx;
				font-weight: 500;
				line-height: normal;
				padding-right: 10px;
			}

			.item-title .time {
				color: #9fa3a2;
				font-size: 22rpx;
				margin-top: 12px;
				display: flex;
				justify-content: space-between;
			}

			.rightbuttons {
				width: 120rpx;
				color: #9fa3a2;
				font-size: 20rpx;
			}

			.item-shiting {
				width: 120rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 22rpx;
				border-radius: 40rpx;
				background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
				color: $white;

			}

			.learnpercent {
				text-align: center;
				color: #9fa3a2;
				font-size: 20rpx;
				margin-top: 2px;
			}

			.tag-content {
				flex: 1;
				min-width: 0;
				white-space: nowrap;
			}

			.tag-box {
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.tag {
				flex-shrink: 0;
				padding: 4rpx 10rpx;
				font-size: 24rpx;
				font-weight: 500;
				border-radius: 4rpx;
				color: var(--ui-BG-Main);
				background: var(--ui-BG-Main-tag);
			}

			.ykw {
				color: #e9b563;
				background: none;
				background-color: rgb(241 236 217 / 50%);
			}
		}

		.vertical-line {
			// width: 1px;
			width: 20px;
			//background-color: #ff6000;
			margin-right: 10px;
			//margin-left: 8px;
			/* flex-grow: 1; */
			align-self: stretch;
		}

		.item-list {
			display: flex;
			flex-direction: column;
			width: 100%;
			/* 条目垂直排列 */
		}

		.title-slot {
			padding-bottom: 15px;
			padding-top: 15px;
			display: flex;
			border-bottom: 1px dotted #e1e1e1;
		}

		.title-slot .courstitle {
			font-size: 26rpx;
			color: #333333;
			width: 90%;
		}

		.teacher {
			display: flex;
			margin-top: 18px;
		}

		.content-img {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}

		.title-slot .coursenum {
			width: 8%;
			font-size: 20rpx;
			color: #666666;
			display: flex;
			align-items: center;
			/* 垂直居中 */
			justify-content: end;
			/* 水平居中 */
		}
	}

  .buy-box {
    .add-btn {
      width: 284rpx;
      height: 72rpx;
      font-weight: 500;
      font-size: 28rpx;
      background-color: var(--ui-BG-Main-light);
      color: var(--ui-BG-Main);
    }

    .buy-btn {
      width: 284rpx;
      height: 72rpx;
      font-weight: 500;
      font-size: 28rpx;
	  margin-left: 26px;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }

    .disabled-btn {
      width: 428rpx;
      height: 72rpx;
      font-weight: 500;
      font-size: 28rpx;

      border-radius: 0 40rpx 40rpx 0;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }

		.cart {
			cursor: pointer;
		}

		.cart-icon {
			width: 24px;
			height: 24px;
		}

		.cart-num {
			position: absolute;
			top: -5px;
			right: -8px;
			font-size: 12px;
			width: 20px;
			height: 14px;
			background: var(--ui-BG-Main);
			border-radius: 10px;
			color: #fff;
			text-align: center;
			line-height: 14px;
		}
  }

	.vbar {
		display: flex;
		align-items: center;
		font-size: 18px;
		font-weight: 600;
		padding: 10px;
		&::before {
			display: inline-block;
			content: '';
			height: 10px;
			width: 3px;
			border-radius: 2px;
			background: #ff6000;
			margin-right: 5px;
		}
	}
</style>